<template>
  <div class="task-details">
    <div class="time-picker-box">
      <time-picker :list1-default-index="computedTime.hour" :list2-default-index="computedTime.minute" @change="timeChange"></time-picker>
    </div>
    <div class="action-box">
      <div class="device-action-box" @touchend="goTo('/devices/task/selectDevice')">
        <span class="title">设备动作</span>
        <span class="action-content">{{deviceAction}}</span>
        <i class="more gray"></i>
      </div>
      <div class="repeat-box">
        <div class="title">
          <span>重复</span>
        </div>
        <div class="week-picker-box">
          <div class="option-box" v-for="week in weekArr" @touchend="selectedWeek(week)">
            <span class="option" :class="{'selected': week.selected}">{{ week.weekText }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btn-box" v-ev:tap.stop="[confirm]">
      <div class="btn">完成</div>
    </div>
    <iframe src="./static/logo.png" style="display:none"></iframe>
  </div>
</template>

<script>
  var Picker = require('../../../shared/components/picker.vue')
  var Modal = require('../../../shared/components/modal.vue')
  // import SDK from '../../helpers/sdk'
  // import api from '../../api'
  import { globalMixins } from '../../mixins'

  export default {
    mixins: [globalMixins],

    components: {
      'modal': Modal,
      'time-picker': Picker
    },

    data () {
      return {
        // 任务时间
        taskTime: {
          hour: '12',
          minute: '00'
        },
        // 选择的星期
        selectedWeekArr: [0, 1, 3, 4], // 0表示星期天
        // 设备动作
        deviceAction: ''
      }
    },
    computed: {
      /**
       * 当前页面是创建还是编辑
       * @return {[type]} [description]
       */
      pageType () {
        return this.$route.path.split('task/')[1]
      },
      /**
       * 计算时间
       * @return {[type]} [description]
       */
      computedTime () {
        var result = {
          hour: 0,
          minute: 0
        }
        if (this.taskTime.hour) {
          result.hour = this.taskTime.hour - 0
        } else {
          result.hour = (new Date()).getHours() - 0
        }
        if (this.taskTime.minute) {
          result.minute = this.taskTime.minute - 0
        } else {
          result.minute = (new Date()).getMinutes() - 0
        }
        return result
      },
      /**
       * 当前页面标题
       * @return {[type]} [description]
       */
      title () {
        var result = {
          create: '创建任务',
          edit: '编辑任务'
        }
        return result[this.pageType] || '未知'
      },
      /**
       * 重置已经选择的周数组 方便显示
       */
      resetSelectedWeekArr () {
        var result = []
        this.selectedWeekArr.map((item) => {
          var newWeek = item - 1
          if (newWeek >= 0) {
            result.push(newWeek)
          } else if (newWeek === -1) {
            result.push(6)
          }
        })
        return result
      },
      /**
       * 用于显示的周数组
       * @return {[type]} [description]
       */
      weekArr () {
        var result = []
        var weekTextArr = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        for (let i = 0; i < weekTextArr.length; i++) {
          var obj = {
            weekText: weekTextArr[i],
            index: i,
            selected: (this.resetSelectedWeekArr.indexOf(i) >= 0),
            value: (i + 1 > 6) ? 0 : i + 1
          }
          result.push(obj)
        }
        return result
      }
    },
    route: {
      data () {
        // 设置标题
        this.setTitle(this.title)
        this.setDefaultData()
      }
    },
    ready () {
    },
    methods: {
      /**
       * 设置默认时间
       */
      setDefaultData () {
        if (this.pageType === 'create') {
          this.taskTime.hour = ''
          this.taskTime.minute = ''
          this.selectedWeekArr = []
        } else if (this.pageType === 'edit') {
          this.deviceAction = '灯01启动'
        }
      },
      /**
       * 完成按钮
       * @return {[type]} [description]
       */
      confirm () {
        console.log('确定')
      },
      /**
       * 切换已选择的周
       * @param  {[type]} week [description]
       * @return {[type]}      [description]
       */
      selectedWeek (week) {
        var newSelectedWeekArr = [].concat(this.selectedWeekArr)
        if (newSelectedWeekArr.indexOf(week.value) > -1) {
          newSelectedWeekArr.$remove(week.value)
        } else {
          newSelectedWeekArr.push(week.value)
        }
        // 数组排序
        newSelectedWeekArr.sort(function (a, b) {
          return a - b
        })
        this.selectedWeekArr = newSelectedWeekArr
        this.log('切换周为' + JSON.stringify(this.selectedWeekArr) + '0为星期天，1为星期一，以此类推')
      },
      /**
       * 用户改变时间
       * @param  {[type]} params [description]
       * @return {[type]}        [description]
       */
      timeChange (params) {
        var time = params.picker1.value + ':' + params.picker2.value
        this.log('切换时间为' + time)
        this.taskTime.hour = params.picker1.value
        this.taskTime.minute = params.picker2.value
      },

      /**
       * 跳转页面函数
       * @param  {[type]} str [description]
       * @return {[type]}     [description]
       */
      goTo (str) {
        this.$route.router.go(str)
      }
    }
  }
</script>

<style lang="stylus">
  @import '../../../shared/assets/style/common'

  .task-details
    .time-picker-box
      width 100%
      margin-top 0.5rem
    .action-box
      width 100%
      height auto
      background #fff
      margin-top 0.5rem
      border-top 1px solid #cdcdcd
      border-bottom 1px solid #cdcdcd
      padding 0 0.3rem
      box-sizing border-box
      margin-bottom 1rem
      .device-action-box
        width 100%
        height 1.5rem
        line-height 1.5rem
        position relative
        border-bottom 1px solid #cdcdcd
        .title
          color #444444
          font-size 0.45rem
        .action-content
          display inline-block
          width 5rem
          position absolute
          right 1.2rem
          while-space nowrap
          text-overflow ellipsis
          text-align right
          color #bbb
        i.more
          width 0.6rem
          height 0.6rem
          position absolute
          right 0.4rem
          top 50%
          transform translate3d(0, -50%, 0)
          display block
      .repeat-box
        width 100%
        height auto
        .title
          width 100%
          height 1.2rem
          line-height 1.2rem
          color #444444
          font-size 0.45rem
        .week-picker-box
          width 100%
          display table
          padding-bottom 0.3rem
          .option-box
            display table-cell
            padding 0.15%
            box-sizing border-box
            text-align center
            font-size 0.32rem
            .option
              display block
              width 85%
              height 0.7rem
              line-height 0.7rem
              border 1px solid #7d7d7d
              border-radius 50%
              &.selected
                background #09b85a
                color #fff
</style>
